<template>
  <div>
    <component :is="view.type" v-bind="view.attrs" class="pg-w-[100%]"  v-debug="{vms,models,dataSet}">
      <Card slot="left" class="bg" :title="'部门清单'">
        <deptTree :data="dataSet.deptTreeData"></deptTree>
      </Card>
      <Card slot="right" class="bg" :title="'人员清单'">
        <deptTable :data="dataSet.deptTableData"></deptTable>
      </Card>
    </component>
    <createTreeModal :dataSet="dataSet"></createTreeModal>
    <editTreeModal :dataSet="dataSet"></editTreeModal>
    <detailTreeModal :dataSet="dataSet"></detailTreeModal>
  </div>
</template>

<script>
import deptTable from "./main/deptTable.vue";
import ancMixin from "./ancMixin";
import deptTree from "./components/deptTree.vue";
import createTreeModal from "./components/createTreeModal/createTreeModal.vue";
import editTreeModal from "./components/editTreeModal/editTreeModal.vue";
import detailTreeModal from "./components/detailTreeModal/detailTreeModal.vue";
export default {
  name: "",
  components: {
    deptTable,
    deptTree,
    createTreeModal,
    editTreeModal,
    detailTreeModal,
  },
  mixins: [ancMixin],
  data() {
    return {
      tabName: "",
    };
  },
  props: {},
  watch: {},
  computed: {
    view() {
      return {
        type: ["starGenView", "starTwoView", "starThreeView"][1],
        attrs: {
          left: 4,
          right: 20,
          middle: 0,
          minLeftHeight: "300px",
          title: {
            "en-US": "abc",
            "zh-CN": "部门管理",
          }[this.G_Locale],
          fontStyle: {},
        },
      };
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.bg {
  height: 100%;
  background-color: #fff;
}
</style>
